<template>
  <div style="min-height: 800px" class="box-shadow robot-manage">
    <el-row style="display: flex; padding-left: 15px" class="search-area">
      <el-input
        placeholder="请输入名称、型号、IP地址"
        prefix-icon="el-icon-search"
        v-model="robotName"
        clearable
        size="medium"
        style="width: 384px"
      >
      </el-input>
      <div
        @click="serachBtn"
        class="serch-btn cuver-point area-serch"
        style="width: 84px; height: 36px"
      >
        搜索
      </div>
    </el-row>
    <div class="robot-parent">
      <div class="first-robot robot-box">
        <img
          src="@/assets/images/system/robot-more.png"
          class="first-robot-img"
          alt=""
          @click="operatRobot('add')"
        />
      </div>
      <!-- 机器人数据 -->
      <div
        v-for="(item, index) in robotList"
        :key="index"
        class="robot-list robot-box"
        :style="index > 2 ? 'margin-top:10px' : ''"
      >
        <!-- 顶部 -->
        <div class="robot-list-header">
          <div class="robot-name">
            #{{ index + 1 }}&nbsp;&nbsp;{{ item.robotName }}
          </div>
          <div class="operat-header">
            <img
              src="@/assets/images/system/robot-edit.png"
              alt=""
              @click="operatRobot('edit', item)"
            />
            <img
              src="@/assets/images/system/robot-del.png"
              style="margin-left: 16px"
              alt=""
              @click="delRobot(item)"
            />
          </div>
        </div>
        <!-- 机器信息 -->
        <div class="robot-info" @click="switchRobot">
          <div>
            <!-- <img :src="item.url" alt="" /> -->
            <img :src="item.url" alt="" />
          </div>
          <el-row class="content-info">
            <el-col style="margin-left: 30px">
              <span class="title" style="margin-top: 60px">型号：</span>
              <span class="content">{{ item.robotType }}</span>
            </el-col>
            <el-col style="margin-left: 30px">
              <span class="title">IP地址：</span>
              <span class="content">{{ item.robotIp }}</span>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 抽屉盒子 -->
    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawerVisible"
      direction="rtl"
      :before-close="handleClose"
      size="34%"
    >
      <div>
        <el-form
          :model="drawerForm"
          ref="drawerRef"
          :rules="formRules"
          :inline="true"
          label-width="125px"
          label-position="right"
        >
          <el-form-item label="机器人名称：" prop="robotName">
            <el-input
              v-model="drawerForm.robotName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="型号：" required>
            <div class="drawer-model">
              <div
                v-for="(item, index) in drawerRobotList"
                :key="index"
                @click="drawerTypeClick(item)"
                :class="[
                  'common',
                  robotType == item.model ? 'current' : 'normal',
                ]"
              >
                <img :src="item.url" alt="" />
                <span>{{ item.model }}</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="IP地址：" prop="robotIp">
            <el-input
              v-model="drawerForm.robotIp"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="账号：" prop="username" required>
            <el-input
              disabled
              v-model="drawerForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password" required>
            <el-input
              disabled
              v-model="drawerForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="demo-drawer__footer drawer-footer">
        <div @click="submitBtn" class="serch-btn">确认</div>
        <div @click="drawerVisible = false" class="reset-btn">取消</div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import Cookies from "js-cookie";
import $X from "@/utils/$";
import {
  API_robotList,
  API_addRobot,
  API_editRobot,
  API_getRobotInfo,
  API_resourceDel,
} from "@/api/system/robotmanage.js";
export default {
  data() {
    return {
      drawerVisible: false, //盒子显隐
      id: "", //编辑的id
      drawerTitle: "", //标题
      robotName: "", //搜索参数
      robotType: "", //抽屉当前被选中的机器人
      robotList: [], //机器人数据
      drawerForm: {
        robotName: "",
        robotIp: "",
        username: "",
        password: "******",
      },
      robotList: [],
      drawerRobotList: [
        {
          model: "T3-C",
          url: require("@/assets/images/robottype/T3C.png"),
        },
        {
          model: "T3-S",
          url: require("@/assets/images/robottype/T3S.png"),
        },
        {
          model: "T3-J",
          url: require("@/assets/images/robottype/T3J.png"),
        },
        {
          model: "T3-F",
          url: require("@/assets/images/robottype/T3F.png"),
        },
        {
          model: "T5-E",
          url: require("@/assets/images/robottype/T5E.png"),
        },
        {
          model: "T7-E",
          url: require("@/assets/images/robottype/T7E.png"),
        },
        {
          model: "T7-C",
          url: require("@/assets/images/robottype/T7C.png"),
        },
        {
          model: "T7-S",
          url: require("@/assets/images/robottype/T7S.png"),
        },
        {
          model: "T7-A",
          url: require("@/assets/images/robottype/T7A.png"),
        },
        {
          model: "T9-W",
          url: require("@/assets/images/robottype/T9W.png"),
        },
        {
          model: "T9-C",
          url: require("@/assets/images/robottype/T9C.png"),
        },
        {
          model: "T9-R",
          url: require("@/assets/images/robottype/T9R.png"),
        },
        {
          model: "其他",
          url: require("@/assets/images/robottype/default.png"),
        },
      ], //机器人类型
      formRules: {
        robotName: [
          { required: true, message: "机器人名称不能为空！", trigger: "blur" },
        ],
        robotIp: [
          { required: true, message: "IP地址不能为空！", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.serachBtn();
    this.drawerForm.username = Cookies.get("username");
  },
  mounted() {
    this.drawerForm.username = Cookies.get("username");
  },
  methods: {
    /**切换机器人 免登陆 */
    switchRobot() {
      // process.env.VUE_APP_WS_API
      let username = $X.Encrypt(
        "admin",
        "1234123412ABCDEF",
        "ABCDEF1234123412"
      );
      let pws = $X.Encrypt("admin123", "1234123412ABCDEF", "ABCDEF1234123412");
      window.open(
        `http://${window.location.host}/robot/monitor?username=${username}&pws=${pws}&isShowHeader=true`
      );
      return;
    },
    /**搜索按钮 */
    serachBtn() {
      API_robotList({ robotName: this.robotName }).then((res) => {
        if (res.code == 200) {
          this.robotList = res.data.map((item) => {
            return {
              ...item,
              url: item.robotType.replace("-", ""),
            };
          });
          this.robotList.forEach((item) => {
            if (item.url) {
              item.url = require(`@/assets/images/robottype/${item.url}.png`);
            }
          });
        }
      });
    },
    /**新增机器人 */
    operatRobot(type, info) {
      this.id = "";
      this.drawerVisible = true;
      switch (type) {
        case "add":
          this.drawerTitle = "新增";
          break;
        case "edit":
          this.drawerTitle = "编辑";
          this.id = info.robotId;
          this.getRobotInfo(info.robotId);
          break;
      }
    },
    /**关闭前 */
    handleClose() {},
    /**抽屉内部机器人点击事件 */
    drawerTypeClick(robottype) {
      this.robotType = robottype.model;
    },
    /**根据id查询机器人信息 */
    getRobotInfo(query) {
      API_getRobotInfo(query).then((res) => {
        if (res.code == 200) {
          //赋值
          console.warn("res", res);
          this.drawerForm = Object.assign({}, res.data);
          this.robotType = res.data.robotType;
          this.drawerForm.username = Cookies.get("username");
          this.drawerForm.password = "******";
        }
      });
    },
    /**删除机器人 */
    delRobot(item) {
      console.warn("item", item);
      API_resourceDel(item.robotId)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("删除成功！");
          }
        })
        .finally(() => {
          this.serachBtn();
        });
    },
    /**确认 */
    submitBtn() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let params = {
        robotName: this.drawerForm.robotName,
        robotType: this.robotType,
        robotIp: this.drawerForm.robotIp,
      };
      if (this.id != "") {
        //编辑
        API_editRobot({ robotId: this.id, ...params })
          .then((res) => {
            if (res.code == 200) {
              this.$message.success("编辑成功！");
              this.drawerVisible = false;
            }
          })
          .finally(() => {
            this.id = "";
            loading.close();
            this.serachBtn();
          });
      } else {
        // 新增
        API_addRobot(params)
          .then((res) => {
            if (res.code == 200) {
              this.$message.success("新增成功！");
              this.drawerVisible = false;
            }
          })
          .finally(() => {
            this.id = "";
            loading.close();
            this.serachBtn();
          });
      }
    },
  },
};
</script>
<style scoped lang="scss">
.robot-manage {
  padding: 24px;
  box-sizing: border-box;
  .area-serch {
    margin-left: 16px;
  }
}
// 机器人样式
.robot-parent {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.robot-box {
  //   flex: 20%;
  width: calc(100% / 4 - 16px) !important;
  height: 216px;
  background-color: rgba(255, 255, 255, 0.08);
}
.robot-flex {
  display: flex;
}
.first-robot {
  display: flex;
  justify-content: center;
  align-items: center;

  margin-left: 15px;
  .first-robot-img {
    width: 40px;
    height: 40px;
  }
}
// 机器人列表
.robot-list {
  margin-left: 15px;
  // 头部
  .robot-list-header {
    display: flex;
    justify-content: space-between;
    height: 40px;
    padding: 13px 16px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.08);
    .robot-name {
      font-size: 14px;
      font-family: SourceHanSansSC-Bold, SourceHanSansSC;
      font-weight: bold;
      color: #ffffff;
    }
    .operat-header {
      img {
        width: 20px;
        height: 20px;
      }
    }
  }
  // 主体
  .robot-info {
    display: flex;
    font-size: 14px;
    font-weight: 400;
    img {
      width: 160px;
      height: 160px;
    }
    .content-info {
      display: flex;
      width: 208px;
      flex-direction: column;
      align-content: center;
      align-items: center;
      align-content: center;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;

      .title {
        display: inline-block;
        width: 60px;
        text-align: right;
        color: #bfbfbf;
        line-height: 14px;
      }
      .content {
        color: #ffffff;
        line-height: 18px;
      }
    }
  }
}
.drawer-model {
  display: flex;
  flex-wrap: wrap;
  .common {
    display: flex;
    width: 98px;
    height: 98px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
    margin-top: 10px;
    margin-bottom: 24px;
    img {
      width: 98px;
      height: 98px;
    }
  }
  .normal {
    color: rgba(191, 191, 191, 1);
    img {
      border: 1px solid #ffffff;
    }
  }
  .current {
    font-weight: bold;
    color: #00d1ff;
    img {
      border: 1px solid #ffffff;
      border: 1px solid rgba(0, 209, 255, 1);
    }
  }
}
.drawer-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  div:nth-child(2) {
    margin-left: 16px;
  }
}
::v-deep {
  .el-input__suffix {
    top: -20px;
  }
}
::v-deep {
  .el-icon-search {
    height: 36px !important;
  }
}
</style>
